<template>
  <div class="user-images">
    <el-carousel :interval="6000" type="card" height="220px">
      <el-carousel-item v-for="item in carouselImages" :key="item">
        <img :src="item" class="image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getNewImageCarousel } from "@/api/home.js";
export default {
  data() {
    return {
      carouselImages: [
        "http://image.wicking.xyz/background/bg_01.png",
        "http://image.wicking.xyz/background/bg_02.jpg",
        "http://image.wicking.xyz/background/bg_03.jpg",
        "http://image.wicking.xyz/background/bg_04.png",
        "http://image.wicking.xyz/background/bg_05.png",
      ],
    };
  },
  created() {
    this.getImageCarousel();
  },
  methods: {
    getImageCarousel() {
      getNewImageCarousel().then((res) => {
        if (res.code === 200) {
          this.carouselImages = res.data.map((image) => image.imageUrl);
        }
      });
    },
  },
};
</script>

<style scoped>
.user-images {
  padding-top: 20px;
}

.image {
  width: 620px;
  height: auto;
}
</style>